﻿@model HelloMinasan.Web.Song.ViewModels.SongViewModels
@{
    ViewBag.Title = "Songs";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Content/Js/FavouriteSongs.js")"></script>
<script src="@Url.Content("~/Content/Js/CommunityFunction.js")"></script>
<script src="@Url.Content("~/Content/Js/CommunityGrammar.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.msgbox.min.js")"></script>
<link href="@Url.Content("~/Content/jquery.msgbox.css")" rel="stylesheet" />
<script>
    $(document).ready(function(){
        //$(".description").draggable();
        //$(".description").css("position", "absolute");
    });
    function startTest(isClose, songId)
    {
        if(isClose){
            $("#lyricAndGrammarRegion").show(200);
            $("#sectionShowWhenDoTest").hide(200);
            return;
        }
        $("#lyricAndGrammarRegion").hide(200);
        $("#sectionShowWhenDoTest").show(200);
        var iframeRegion = document.getElementById("iframeTestSection");
        iframeRegion.src = "/Song/TestList/"+ songId;
    }
    function setIframeHeight(iframeId)
    {
        var ifDoc, ifRef = document.getElementById( iframeId );
        try
        {   
            ifDoc = ifRef.contentWindow.document.documentElement;  
        }
        catch( e )
        { 
            try
            { 
                ifDoc = ifRef.contentDocument.documentElement;  
            }
            catch(ee)
            {   
            }  
        }
        if( ifDoc )
        {
            ifRef.height = 1;  
            ifRef.height = ifDoc.scrollHeight;  
        }
    }
</script>
@{bool isOwner = Model.Owners.ToLower() == User.Identity.Name.ToLower() ? true : false; }
<div class="contentSection">
    <table cellspacing="0" cellpadding="0" cellpaddning="5" width="100%">
        <tr>
            <td colspan="2" style="width: 550px" valign="top">
                <div class="contentSectionInside" style="margin-bottom: 10px;">
                    <img src="@Url.Content("~/Content/Images/song.png")" width="30" height="30"/><font size="5" style="line-height: 30px; font-family: ufontscomavenir35light,tahoma"><strong>@Model.Song.SongName</strong></font>
                    <table cellspacing="0" cellpaddning="0" width="100%">
                        <tr>
                            <td width="100" valign="top" style="padding-top: 20px;" align="center">
                                @if (!string.IsNullOrEmpty(Model.Song.Images) && Model.Song.Images.Substring(0, 4) != "http://")
                                {
                                    <img src="@Model.Song.Images" class="avatarImg" />
                                }
                                else
                                {
                                    <img src="@Model.Song.Images" class="avatarImg" />
                                }
                            </td>
                            <td align="left" valign="top" align="center" style="padding-top: 20px;">

                                @if (Model.Song.SongURL != null && Model.Song.SongURL.Length > 0)
                                {
                                    <div style="width: 440px; overflow: auto;">
                                        @if (!Model.Song.IsEmbed)
                                        {
                                            <audio controls style="width: 100%;">
                                                <source src="@Model.Song.SongURL" type="audio/mp3">
                                                Your browser does not support the audio element.
                                            </audio>
                                        }
                                        else
                                        {
                                            @Html.Raw(Model.Song.SongURL)
                                        }
                                    </div>
                                }

                                else
                                {
                                    <div class="communityUpdateSong">
                                        <img src="@Url.Content("~/Content/Images/allowEdit.png")" />
                                        <font color="blue">Suggest audio for this song? <img style="display:none" id="loadingIndicatorSuggestEmbedLinkSmall" width="18" src="@Url.Content("~/Content/Images/loader.gif")" /></font>
                                        <div class="uploadSectionRegion">
                                            <div id="suggestEmbedLink">
                                                <div class="contentSection">
                                                    <strong>Suggest Audio - Embed link</strong>
                                                </div>
                                                <div class="contentSectionInside">
                                                    <div class="containerAllProperties">
                                                        <input type="text" id="textareaEmbedLink" style="width: 370px;"></input>
                                                    </div>
                                                    <input onclick="suggestEmbedLinkFunction(@Model.Song.Id)" type="button" value="Suggest" />
                                                </div>
                                            </div>
                                            <img style="display:none;margin-top:20px;" id="loadingIndicatorSuggestEmbedLink" src="@Url.Content("~/Content/Images/loader.gif")" />
                                        </div>
                                    </div>
                                }
                            </td>
                            <td width="400" valign="top" style="padding-top: 10px; padding-left: 10px;">
                                <div class="starScore">@Model.Song.LikeTime</div>
                                <div style="margin: 2px;">
                                    <img title="Total listening times" src="@Url.Content("~/Content/Images/date.png")" class="iconSmall" />
                                    Posted date : @Model.Song.PostedDate.ToShortDateString() by <b>
                                        @if(Request.IsAuthenticated && !isOwner)
                                        {
                                            <a href="#" onclick="addFriend('@Model.Owners')"><img src="@Url.Content("~/Content/Images/add.png")" width="15" /></a>
                                        }
                                        <a href="/Account/UserInformation/@Model.Owners" /> @Model.Owners </a>
                                        </b><br />
                                </div>
                                <div style="margin: 2px;">
                                    <img title="Total listening times" src="@Url.Content("~/Content/Images/kghostview.png")" class="iconSmall" />
                                    View count : @Model.Song.SongView
                                </div>
                                <div style="margin: 2px;">
                                    <img title="Total listening times" src="@Url.Content("~/Content/Images/singer.png")" class="iconSmall" />
                                    Singer: @Model.Song.Singer
                                </div>
                                <div style="margin: 2px;">
                                    <img title="Total listening times" src="@Url.Content("~/Content/Images/composerPerson.png")" class="iconSmall" />
                                    Composer : @Model.Song.Composer
                                </div>
                                <div id="functionSongRegion">
                                    @if (Request.IsAuthenticated)
                                    {
                                        <a href="#" onclick="addFavouriteSong(@Model.Song.Id)" title="Add this person as friend">
                                                <img src="@Url.Content("~/Content/Images/favoritesadd.png")" width="30" height="30" style="margin-right:5px;" /></a>
                                        <a href="#" onclick="likeSong(@Model.Song.Id)">
                                            <img title="Like this song" src="@Url.Content("~/Content/Images/like.png")" class="iconSmall" /></a>
                                    }
                                        <a onclick="startTest(false, @Model.Song.Id)">
                                            <img src="@Url.Content("~/Content/Images/options.png")" width="30" height="30" style="margin-right:5px;" /></a>
                                </div>
                                <div id="functionSongRegionLoading">
                                    <img src="@Url.Content("~/Content/Images/process.gif")" />
                                    Processing ...
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 555px">
                <div id="lyricAndGrammarRegion">
                    <div class="contentSectionInside" style="margin-bottom: 10px">
                        <div align="right" style="margin-bottom: 5px;">
                            <img src="@Url.Content("~/Content/Images/lyric.png")" width="20" height="20" /><b> Lyric</b>
                        </div>
                        <div id="lyricRegionSection">
                            @{ bool isFirstLanguage = true;}
                            @foreach (var item in Model.Song.LyricDetails)
                            {
                                if (isFirstLanguage)
                                {
                                @Html.Raw("<div class=\"titleSection\" id=\"lyricTitle-" + item.Song.Id + "-" + item.Language.Id + "\" style=\"color:red\" onclick=\"showHideLyricSection(\'lyric-" + item.Song.Id + "-" + item.Language.Id + "\', this, 0)\">")
                                    isFirstLanguage = false;
                                }
                                else
                                {
                                @Html.Raw("<div class=\"titleSection\" id=\"lyricTitle-" + item.Song.Id + "-" + item.Language.Id + "\" onclick=\"showHideLyricSection(\'lyric-" + item.Song.Id + "-" + item.Language.Id + "\', this, 0)\">")
                                }
                                if (item.IsOrginal)
                                {
                                <img src="@Url.Content("~/Content/Images/rosette.png")" width="20" height="20"/>
                                }
                                else
                                {
                                <img src="@Url.Content("~/Content/Images/composer.png")" width="20" height="20"/>}
                                <span class="titleTab">@item.Language.Name.Substring(0, 2).ToUpper()</span>
                                if (!item.LyricStatus && item.CanUpdate && Request.IsAuthenticated)
                                {
                                <a id="edit-@item.Song.Id-@item.Language.Id" onclick="communityEditLyric(this, @item.Song.Id , @item.Language.Id)">
                                    <img src="@Url.Content("~/Content/Images/allowEdit.png")" title="Edit this lyric." width="15" /></a>
                                <a id="save-@item.Song.Id-@item.Language.Id" class="toggleButton" onclick="communitySaveLyric(this, @item.Song.Id , @item.Language.Id)">
                                    <img src="@Url.Content("~/Content/Images/save.png")" title="Edit this lyric." width="15" /></a>
                                <a id="cancel-@item.Song.Id-@item.Language.Id" class="toggleButton" onclick="communityCancelLyric(th.is, @item.Song.Id , @item.Language.Id)">
                                    <img src="@Url.Content("~/Content/Images/cancel.png")" title="Cancel." width="15" /></a>
                                }
                                <div class="tooltipContent">
                                    @if (Request.IsAuthenticated)
                                    {
                                        <a href="#" onclick="reportLyric(@item.Id, @item.Song.Id)"><img src="/Content/Images/document-broken.png" height="18" /> Report this lyric</a><br />
                                    }
                                    Language: <strong>@item.Language.Name </strong>
                                    <br />
                                    Last update by <strong>@item.User.Id</strong> on <strong>@item.LastUpdate.ToLongDateString()</strong>
                                </div>
                                @Html.Raw("</div>")
                            }
                            @if (Request.IsAuthenticated)
                            {
                                <div id="lyricTitle-0-0" class="titleSection" onclick="showHideLyricSection('lyric-0-0', this, @Model.Song.Id)">
                                    <img src="@Url.Content("~/Content/Images/document-new.png")" width="20" height="20"/>
                                    +
                                    <div class="tooltipContent">Add new lyric</div>
                                </div>
                            }
                            @if (Model.Song.LyricDetails.Any())
                            {
                                bool isFirst = true;
                                foreach (var item in Model.Song.LyricDetails)
                                {
                                    if (isFirst)
                                    {
                                        if (!item.LyricStatus)
                                        {
                                <textarea id="lyric-@item.Song.Id-@item.Language.Id" 
                                                readonly="readonly" class="lyricTextArea">@item.LyricContent</textarea>
                                        }
                                        else
                                        {
                                <textarea id="lyric-@item.Song.Id-@item.Language.Id" readonly="readonly" class="lyricTextArea">@Html.Raw(item.LyricContent.Replace("\\r\\n", "<br>"))
                                </textarea>
                                        }
                                        isFirst = false;
                                    }
                                    else
                                    {
                                <textarea id="lyric-@item.Song.Id-@item.Language.Id" readonly="readonly" class="lyricTextArea" style="display:none">@item.LyricContent</textarea>
                                    }
                                }
                            }
                            else
                            {
                                <div class="contentSectionInside">Currently, there is no lyric for this song. </div>
                            }
                        </div>
                        <div name="createNewLyricRegion" id="lyric-0-0" style="display: none">
                            <textarea id="newLyricContentCommunity" class="lyricTextArea createLyric"></textarea>
                            Please select language: <span id="comboboxLanguage"></span>
                            <br />
                            <input type="button" onclick="saveCommunityAddNewLyric(@Model.Song.Id)" value="Save" />
                            @*<input onclick="cancelCommunityAddNewLyric()" type="button" value="Cancel" />*@
                        </div>
                        <div id="lyricUpdateIndicator" style="display: none">
                            <img src="@Url.Content("~/Content/Images/loader.gif")" />
                            <br />
                            Please wait while us process your updating...
                        </div>
                    </div>
                </div>
                <div id="sectionShowWhenDoTest" class="hideClass">
                    <div>
                        <div class="titleSection">
                            <img src="@Url.Content("~/Content/Images/song.png")" width="20" height="20"/>
                            <span class="titleTab">Test - <a onclick="startTest(false, @Model.Song.Id)">
                                <img src="/Content/Images/adept_update.png" width="18"></a> - <a onclick="startTest(true, 0)">
                                    <img src="/Content/Images/error.png" width="18"></a></span>
                        </div>
                    </div>
                    <iframe id="iframeTestSection" onload="setIframeHeight(this.id)" src="" scrolling="yes"></iframe>
                </div>
            </td>
            <td valign="top" style="padding-left: 10px;">
                <div class="contentSectionInside" style="margin-bottom: 10px; height: 478px;">
                    <div align="right" style="margin-bottom: 5px;">
                        <img src="@Url.Content("~/Content/Images/lyric.png")" width="20" height="20" /><b> Grammar</b>
                        @if (!Model.Song.SongStatus && Model.Song.CanUpdateGrammar && Request.IsAuthenticated)
                        {
                            <a id="editGrammar-@Model.Song.Id" onclick="communityEditGrammar(this, @Model.Song.Id)">
                                <img src="@Url.Content("~/Content/Images/allowEdit.png")" title="Edit this lyric." width="15" /></a>
                            <a id="saveGrammar-@Model.Song.Id" class="toggleButton" onclick="communitySaveGrammar(this, @Model.Song.Id)">
                                <img src="@Url.Content("~/Content/Images/save.png")" title="Edit this lyric." width="15" /></a>
                            <a id="cancelGrammar-@Model.Song.Id" class="toggleButton" onclick="communityCancelGrammar(this, @Model.Song.Id)">
                                <img src="@Url.Content("~/Content/Images/cancel.png")" title="Cancel." width="15" /></a>
                        }
                    </div>
                    <textarea id="grammar-@Model.Song.Id" readonly="readonly" class="lyricTextArea" style="width:360px !important; height:435px">@Model.Song.Grammar</textarea>
                    <div id="alertGrammar"></div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="sectionHideWhenDoTest">
                    <div class="contentSectionInside" style="margin-bottom: 10px;">
                        <div class="titleSectionActive" onclick="showHideContent(this, 'songDetail')" style="display: inline-table; margin-bottom: 0px;">
                            <img src="@Url.Content("~/Content/Images/song.png")" width="20" height="20"/>
                            <span class="titleTab">Comments</span>
                        </div>
                        <div class="contentSectionInside" style="background-color: white">
                            <div id="commentListAjax">
                                @*TODO: TO BE INTEGREATED THE comment of main HelloMinasan instead of using the seperated comments here*@
                                @Html.Action("CommentListPartial", "Comment", new { songId = Model.Song.Id, currentPage = 1 })
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

<div id="tooltipSectionFunction">
    <div align="right" style="margin-bottom: 5px;"><b title="Hide" style="cursor: pointer" onclick="hideToolsSection(this)">Toolbox [-]</b></div>
    <div id="tooltipSectionContent" align="center">
        @if (isOwner || User.Identity.Name == "admin")
        {
            <div class="icon">
                <a href="~/Song/EditSong/@Model.SongId">
                    <div class="iconShortcut">
                        <img src="~/Content/Images/edit.png" /><br />
                        Edit song information 
                    </div>
                </a>
            </div>
            <div class="icon">
                <div class="description" align="left">
                    Delete this song
                </div>
                <div class="iconShortcut" onclick="deleteSongs(@Model.Song.Id)">
                    <img src="@Url.Content("~/Content/Images/delete.png")" /><br />
                    Delete song
                </div>
            </div>
        }
        @if (!isOwner && Request.IsAuthenticated) {
            <div class="icon">
                <div class="description">
                    <div class="positionTheTooltip">
                        <div class="contentSectionInside" style="width: 350px;">
                            <strong>Why do you want to report this song?</strong>
                        </div>
                        <div class="contentSectionInside" align="left" style="width: 350px;">
                            <input type="radio" name="report" value="1">Song is broken.<br>
                            <input type="radio" name="report" value="2">The song with title is not correct.<br />
                            <input type="radio" name="report" value="3">Violate.<br>
                            <input type="radio" name="report" value="4">Sex content.<br />
                            <input type="radio" name="report" value="5">Others<br />
                            <div>Comment:</div>
                            <input id="reportCommentContent" type="text" style="width: 320px;" />
                            <div align="right"><a class="linkText" onclick="reportSong(@Model.Song.Id)">Report now</a></div>
                        </div>
                    </div>
                </div>
                <div class="iconShortcut">
                    <img style="display:none;margin-top:20px;" id="loadingIndicatorReportSong" src="@Url.Content("~/Content/Images/loader.gif")" />
                    <img title="Report this song" src="@Url.Content("~/Content/Images/document-broken.png")" /><br />
                    Report song
                </div>
            </div>
        }
        <div class="icon">
            <div class="description" align="left" style="width: 450px">
                <div class="contentSectionInside positionTheTooltip">
                    <div class="titleSectionActive">
                        <img src="@Url.Content("~/Content/Images/song.png")" width="20" height="20"/>
                        <span class="titleTab">Same owner</span>
                    </div>
                    <div class="contentSectionInside" style="background-color: white">
                        @Html.Partial("RelativeSongs", Model.RelativeSongs)
                    </div>
                </div>
            </div>
            <div class="iconShortcut">
                <img src="@Url.Content("~/Content/Images/url.png")" /><br />
                Relative songs
            </div>
        </div>
    </div>
</div>
